<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页 | 性能优化版</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                @apply hover:shadow-lg transition-all duration-300;
            }
            .btn-hover {
                @apply transform hover:-translate-y-0.5 hover:shadow-md transition-all duration-300;
            }
            .animate-shake {
                animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
            }
            @keyframes shake {
                10%, 90% { transform: translateX(-1px); }
                20%, 80% { transform: translateX(2px); }
                30%, 50%, 70% { transform: translateX(-3px); }
                40%, 60% { transform: translateX(3px); }
            }

            /* 新增：骨架屏动画 */
            .skeleton {
                animation: skeleton-loading 1.5s infinite alternate;
            }

            @keyframes skeleton-loading {
                0% { background-color: hsl(200, 20%, 85%); }
                100% { background-color: hsl(200, 20%, 95%); }
            }
        }
    </style>

    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
</head>

<body class="bg-slate-50 font-sans text-slate-800 min-h-screen">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50 transition-custom">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <img src="pic/logo2.jpg" alt="博客系统logo" class="h-10 w-10 rounded-full object-cover shadow-md transform hover:scale-105 transition-custom">
            <span class="blog-title text-xl font-bold text-primary text-shadow">我的博客系统</span>
        </div>

        <div class="hidden md:flex items-center space-x-6">
            <a href="blog_list.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-home"></i> 主页
            </a>
            <a href="blog_edit.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-pencil"></i> 写博客
            </a>
            <a href="#" onclick="logout()" class="nav-span text-slate-600 hover:text-red-500 transition-custom flex items-center gap-1.5">
                <i class="fa fa-sign-out"></i> 注销
            </a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button class="md:hidden text-slate-600 hover:text-primary transition-custom">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>
</nav>

<!-- 主内容区 -->
<div class="container mx-auto px-4 pt-24 pb-16">
    <div class="max-w-5xl mx-auto">
        <!-- 页面标题 -->
        <div class="mb-6 animate-fade-in">
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-slate-800">
                <i class="fa fa-pencil-square-o text-primary mr-2"></i>更新博客
            </h1>
            <p class="text-slate-500 mt-1">修改并更新你的博客内容 - 优化版</p>
        </div>

        <!-- 编辑卡片 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition-all duration-500" id="editor-card">
            <!-- 标题和更新按钮区域 -->
            <div class="p-6 border-b border-slate-100">
                <div class="flex flex-col sm:flex-row gap-4">
                    <div class="flex-1">
                        <label for="title" class="block text-sm font-medium text-slate-700 mb-1">博客标题</label>
                        <input type="hidden" id="blogId">
                        <input type="text" id="title"
                               class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom placeholder:text-slate-300"
                               placeholder="博客标题加载中...">
                    </div>
                    <div class="sm:w-40 flex items-end">
                        <button id="submit" onclick="submit()"
                                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center gap-2 shadow-sm btn-hover">
                            <i class="fa fa-save"></i>
                            <span>更新文章</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 编辑器工具栏提示 -->
            <div class="px-6 py-3 bg-slate-50 border-b border-slate-100 text-sm text-slate-500">
                <div class="flex flex-wrap items-center gap-x-6 gap-y-2">
                    <div class="flex items-center gap-1.5">
                        <i class="fa fa-info-circle text-primary"></i>
                        <span>实时预览已开启，左侧编辑，右侧预览</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <i class="fa fa-keyboard-o text-primary"></i>
                        <span>支持 Markdown 语法，按 Ctrl+S 保存</span>
                    </div>
                </div>
            </div>

            <!-- Markdown编辑器区域 -->
            <div class="p-4 md:p-6">
                <div id="editor" class="rounded-lg border border-slate-200 transition-opacity duration-500 min-h-[600px] relative">
                    <!-- 编辑器骨架屏（加载状态） -->
                    <div id="editor-skeleton" class="absolute inset-0 bg-white flex flex-col p-4">
                        <div class="h-8 w-40 skeleton rounded mb-6"></div>
                        <div class="h-6 w-full skeleton rounded mb-4"></div>
                        <div class="h-6 w-3/4 skeleton rounded mb-4"></div>
                        <div class="h-6 w-full skeleton rounded mb-4"></div>
                        <div class="h-6 w-1/2 skeleton rounded mb-4"></div>
                        <div class="h-6 w-full skeleton rounded mb-4"></div>
                        <div class="h-6 w-2/3 skeleton rounded mb-4"></div>
                        <div class="h-6 w-full skeleton rounded mb-6"></div>

                        <div class="h-8 w-32 skeleton rounded mb-4"></div>
                        <div class="h-6 w-2/3 skeleton rounded mb-4"></div>
                        <div class="h-6 w-full skeleton rounded mb-4"></div>
                    </div>
                    <textarea style="display:none;" id="content">## 博客内容加载中...</textarea>
                </div>
            </div>

            <!-- 帮助信息 -->
            <div class="p-4 bg-slate-50 border-t border-slate-100 text-sm text-slate-500">
                <div class="flex items-start gap-2">
                    <i class="fa fa-lightbulb-o text-amber-500 mt-0.5"></i>
                    <div>
                        <p class="font-medium text-slate-700">Markdown 语法提示</p>
                        <p class="mt-1">标题: # 一级标题 ## 二级标题 | 粗体: **文本** | 斜体: *文本* | 链接: [名称](url) | 图片: ![描述](url) | 列表: - 项目</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 错误状态 -->
        <div class="hidden bg-white rounded-xl p-8 text-center shadow-sm" id="error-message">
            <i class="fa fa-exclamation-triangle text-amber-500 text-3xl mb-4"></i>
            <h3 class="text-xl text-slate-700">加载失败</h3>
            <p class="text-slate-500 mt-2" id="error-details">无法加载博客内容，请稍后重试</p>
            <button onclick="getBlogInfo()" class="mt-4 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom">
                <i class="fa fa-refresh mr-1"></i> 重新加载
            </button>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="blog-editormd/editormd.min.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">
    // 全局编辑器引用
    var mdEditor = null;

    // 页面滚动效果
    window.addEventListener('scroll', function() {
        const nav = document.querySelector('nav');
        if (window.scrollY > 10) {
            nav.classList.add('py-2', 'shadow');
            nav.classList.remove('py-3');
        } else {
            nav.classList.add('py-3');
            nav.classList.remove('py-2', 'shadow');
        }
    });

    // 提交博客更新
    function submit() {
        if (!mdEditor || !$("#title").val()) {
            // 添加轻微抖动动画提醒用户
            const titleInput = document.getElementById('title');
            titleInput.classList.add('animate-shake');
            setTimeout(() => {
                titleInput.classList.remove('animate-shake');
            }, 600);

            alert("请填写完整内容");
            return;
        }

        $.ajax({
            type: "post",
            url: "/blog/update",
            contentType: "application/json",
            data: JSON.stringify({
                id: $("#blogId").val(),
                title: $("#title").val(),
                content: mdEditor.getMarkdown()
            }),
            success: function(result) {
                if (result != null && result.code == 200 && result.data) {
                    // 成功后的视觉反馈
                    const submitBtn = document.getElementById('submit');
                    const originalHTML = submitBtn.innerHTML;

                    submitBtn.innerHTML = '<i class="fa fa-check"></i> 更新成功！';
                    submitBtn.classList.add('bg-secondary');

                    setTimeout(() => {
                        submitBtn.innerHTML = originalHTML;
                        submitBtn.classList.remove('bg-secondary');
                        location.href = "blog_list.html";
                    }, 1200);
                } else {
                    alert(result ? result.errMsg || "更新失败，请重试" : "更新失败，请重试");
                }
            },
            error: function() {
                alert("网络错误，请稍后重试");
            }
        });
    }

    // 获取博客信息并进行渲染
    function getBlogInfo() {
        // 隐藏错误信息
        document.getElementById('error-message').classList.add('hidden');

        // 显示骨架屏
        document.getElementById('editor-skeleton').classList.remove('hidden');

        $.ajax({
            type: "get",
            url: "/blog/getBlogDetail" + location.search,
            success: function(result) {
                if (result != null && result.code == 200 && result.data != null) {
                    let blogInfo = result.data;
                    $("#blogId").val(blogInfo.id);
                    $("#title").val(blogInfo.title);

                    // 设置Markdown内容
                    if (mdEditor) {
                        mdEditor.setMarkdown(blogInfo.content);
                        // 隐藏骨架屏
                        setTimeout(() => {
                            document.getElementById('editor-skeleton').classList.add('hidden');
                        }, 300);
                    }
                } else {
                    // 显示错误信息
                    showError(result ? result.errMsg || "加载失败，请重试" : "加载失败，请重试");
                }
            },
            error: function() {
                showError("网络错误，请稍后重试");
            }
        });
    }

    // 显示错误
    function showError(msg) {
        document.getElementById('error-details').textContent = msg;
        document.getElementById('error-message').classList.remove('hidden');
        document.getElementById('editor-skeleton').classList.add('hidden');
    }

    // 初始化编辑器
    function initEditor() {
        mdEditor = editormd("editor", {
            watch: true,
            layout: "editormd-layout-full",
            preview: true,
            width: "100%",
            height: "550px",
            path: "blog-editormd/lib/",
            onload: function() {
                this.watch();
                this.setMarkdown($("#content").val());
                // 开始加载博客内容
                getBlogInfo();
            }
        });
    }

    // 添加键盘快捷键 Ctrl+S 保存
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            submit();
        }
    });

    // 页面加载完成后立即初始化编辑器
    document.addEventListener('DOMContentLoaded', function() {
        initEditor();
    });
</script>
</body>
</html>